<template>
  <div class="view-wrapper">
    <div class="head">
      <div class="cardTypeBox">
        <div @click="handleTab(item.id)" v-for="(item,index) in cardType" :key="index"
          :class="['list', currentNavtab == item.id ? 'active' : '']">{{item.name}}</div>
      </div>
    </div>
    <div class="listBox">
      <QuestionContent v-if="currentNavtab == 1" />
      <QuestionClassification v-if="currentNavtab == 2" />
    </div>

  </div>
</template>
<script>
  import QuestionClassification from "./components/questionClassification";
  import QuestionContent from "./components/questionContent";

  export default {
    name: 'BeeTokenSystemH5ProblemConfiguration',
    components: {
      QuestionClassification,
      QuestionContent,
    },
    data() {
      return {
        currentNavtab: 1,
        cardType: [{
            id: 1,
            name: '问题内容'
          },
          {
            id: 2,
            name: '问题分类'
          },
        ],
        detailDialog: false,
      };
    },
    created() {

    },
    methods: {
      handleTab(id) {
        this.currentNavtab = id
      },

    },
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
  }

  .el-form--inline .el-form-item {
    margin-right: 40px;
  }

  .cardTypeBox {
    display: flex;
    justify-content: flex-start;
    border: 1px solid #dfe6ec;
    width: fit-content;

    .list {
      width: 140px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      border-right: 1px solid #dfe6ec;
      cursor: pointer;
    }

    .list:nth-last-child(1) {
      border: none;
    }

    .active {
      background: #1890ff;
      color: #fff;
    }
  }

</style>
